<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        .layui-table-page {
            text-align: center;
        }
    </style>
</head>
<body>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">删除选中行</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        <button class="layui-btn layui-btn-sm" lay-event="excel">导出Excel</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<!-- 引入jquery.js -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:'/goods/findByPage'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,even: true //开启隔行背景
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,id: 'testReload'
            ,title: '用户数据表'
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                limit:4,
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,limits:[4,6,8] //可选每页条数
                ,first: '首页' //首页显示文字，默认显示页号
                ,last: '尾页'
                ,prev: '<i class="layui-icon layui-icon-left"></i>' //上一页显示内容，默认显示 > <
                ,next: '<i class="layui-icon layui-icon-right"></i>'
            }
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'goodId', title:'商品ID', width:60, fixed: 'left', unresize: true, sort: true, align: 'center'}
                ,{field:'saler', title:'出售者', width:80, sort: true, align: 'center'}
                ,{field:'salerTelephon', title:'出售者电话', width:70, align: 'center'}
                ,{field:'bigPic', title:'大图片', width:70,templet:"#img1", align: 'center'}
                ,{field:'pic', title:'抢购图', width:70, templet:"#img2", align: 'center'}
                ,{field:'smallPic1', title:'小图片', width:70,templet:"#img3", align: 'center'}
                ,{field:'smallPic2', title:'小图片', width:70,templet:"#img4", align: 'center'}
                ,{field:'smallPic3', title:'小图片', width:70,templet:"#img5", align: 'center'}
                ,{field:'smallPic4', title:'小图片', width:70,templet:"#img6", align: 'center'}
                ,{field:'describeIllustration', title:'抢购说名', width:58, align: 'center'}
                ,{field:'carriage', title:'运费', align: 'center'}
                ,{field:'remainingTime', title:'剩余时间', width:110, sort: true, align: 'center', templet:"<div>{{layui.util.toDateString(d.remainingTime,'yyyy-MM-dd')}}</div>"}
                ,{field:'countSale', title:'本期售出', align: 'center'}
                ,{field:'countSum', title:'累计售出', align: 'center'}
                ,{field:'typeType', title:'折旧程度', align: 'center'}
                ,{field:'address', title:'商品所在地', align: 'center'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:140, align: 'center'}
            ]]
            //,page: true
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    //获取选中数据
                    var data = checkStatus.data;

                    if(data.length<=0){
                        layer.msg('最少选择一行');
                        return;
                    }

                    //----删除选中行操作----
                    //获取选中行数据id
                    var goodIds = '';
                    for (var i = 0; i < data.length; i++) {
                        goodIds+="&goodId="+data[i].goodId;
                    }
                    alert(goodIds);
                    //使用ajax
                    $.get("goods/deleteAll", goodIds,
                        function(data){

                            if("success" == data){
                                //window.location.href="http://localhost:8080/index.html";
                                layer.msg('删除成功');
                                //tableIns.reload();
                            }
                        });
                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
                //选中数据导出到Excel表格
                case 'excel':
                    var data = checkStatus.data;
                    //layer.alert(JSON.stringify(data));

                    //声明一个变量，存储id
                    var goodIds = '';
                    //遍历
                    for(var i = 0; i < data.length; i++){
                        goodIds+="&goodId="+data[i].goodId;
                    }
                    if (goodIds == '') {
                        layer.msg('未选择任何数据');
                        // layer.alert('未选择任何数据');
                    } else {
                        $.get("user/excel", goodIds,
                            function (data) {
                                if ("success" == data) {
                                    layer.alert('数据导出成功！！！');
                                } else if ("false" == data) {
                                    layer.alert('数据导出失败。。。');
                                }
                            });
                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;

            //console.log(obj)
            if(obj.event === 'del'){
                //layer.alert(JSON.stringify(obj));
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);

                    //从数据库中删除
                    $.ajax({
                        type: "POST",
                        url: "goods/deleteById",
                        data: "goodId="+data.goodId,
                        success: function(msg){
                            //location.reload();//重新加载当前页面
                            //table.reload("test",{});
                        }
                    });
                });
            } else if(obj.event === 'edit'){
                //layer.alert('编辑行：<br>'+ JSON.stringify(data))
                //首先调用的是查询单个的方法
                //window.location.href = "/goods/findById?goodsId="+data.goodId;
                queryOne(data);//把数据渲染到修改页面
            }
        });
    });
</script>

<!-- 引入jquery.js -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script>

    function queryOne(data) {
        layer.open({
            title:['修改商品信息'],
            type: 1,
            content: $("#updateGoods").html(), //修改的页面
            area:['750px','750px'],
            btn:['提交','取消'],
            //弹出后回调
            success:function () {
                $("#goodId").val(data.goodId);
                $("#saler").val(data.saler);
                $("#salerTelephon").val(data.salerTelephon);
                $("#describeIllustration").val(data.describeIllustration);
                $("#carriage").val(data.carriage);
                //生日
                $("#remainingTime").val(layui.util.toDateString(data.remainingTime,'yyyy-MM-dd'));
                $("#countSale").val(data.countSale);
                $("#countSum").val(data.countSum);

                $("#typeType").val(data.typeType);
                $("#address").val(data.address);

                //渲染页面
                layui.form.render();//渲染页面
            },
            //提交调用该函数
            yes:function () {
                //alert("确认")
                $.ajax({
                    type: "POST",
                    url: "goods/updateGoods",
                    data: $("#updateGoodsForm").serialize(),
                    success: function(msg){
                        location.reload();//重新加载当前页面
                    }
                });
            },
            //取消
            btn2:function () {
                //alert("取消")
            }
        });

    }

</script>

<script type="text/html" id="updateGoods">

    <form id="updateGoodsForm" class="layui-form">
        <!-- 页面上不显示id，但是需要作为隐藏域传到后台 -->
        <input type="hidden" id="goodId" name="goodId">

        <div class="layui-form-item">
            <label class="layui-form-label">出售者</label>
            <div class="layui-input-block">
                <input id="saler" type="text" name="saler" lay-verify="title" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">出售者电话</label>
            <div class="layui-input-block">
                <input id="salerTelephon" type="text" name="salerTelephon" lay-verify="title" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">疯狂抢购</label>
            <div class="layui-input-block">
                <input id="describeIllustration" type="text" name="describeIllustration" lay-verify="title" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">运费</label>
            <div class="layui-input-block">
                <input id="carriage" type="text" name="carriage" lay-verify="title" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">本期售出</label>
            <div class="layui-input-block">
                <input id="countSale" type="text" name="countSale" lay-verify="title" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">累计售出</label>
            <div class="layui-input-block">
                <input id="countSum" type="text" name="countSum" lay-verify="title" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">剩余时间</label>
            <!-- layui-input-block 输入框会占满除文字外的整行 -->
            <div class="layui-input-block">
                <input id="remainingTime" type="date" name="remainingTime" lay-verify="date" autocomplete="off" class="layui-input">
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">折旧程度</label>
            <div class="layui-input-block">
                <input id="typeType" type="text" name="typeType" lay-verify="title" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品所在地</label>
            <div class="layui-input-block">
                <input id="address" type="text" name="address" lay-verify="title" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>

</script>

<script>
    layui.use(["laydate","form"],function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#remainingTime', //指定元素
            format:'yyyy-MM-dd',
        });
    });
</script>
<script type="text/html" id="img1">
    <div><img src="{{d.bigPic}}" width="40" height="40" alt="图片"></div>
</script>
<script type="text/html" id="img2">
    <div><img src="{{d.pic}}" width="40" height="40" alt="图片"></div>
</script>
<script type="text/html" id="img3">
    <div><img src="{{d.smallPic1}}" width="40" height="40" alt="图片"></div>
</script>
<script type="text/html" id="img4">
    <div><img src="{{d.smallPic2}}" width="40" height="40" alt="图片"></div>
</script>
<script type="text/html" id="img5">
    <div><img src="{{d.smallPic3}}" width="40" height="40" alt="图片"></div>
</script>
<script type="text/html" id="img6">
    <div><img src="{{d.smallPic4}}" width="40" height="40" alt="图片"></div>
</script>

</body>
</html>